<template>
  <el-container class="setting_shopping-mall_contract-set">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class="fin-setting-content">
            <el-card shadow="never" class="cardInfo">
              <div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="intro-title">
                      <div class="clearfix" style="text-align: center;">
                        <el-steps class="state" :active="active" align-center finish-status="success">
                          <el-step title="主体信息" description="主体信息" />
                          <el-step title="法人信息" description="法人信息" />
                          <el-step title="提交审核" description="提交审核" />
                        </el-steps>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form>
                          <el-form-item class="person-center-form-item">
                            <span class="form-item-title">操作人：</span>
                            <el-radio-group v-model="activeRadio" :disabled="firstType === 2">
                              <el-radio :label="1">法人</el-radio>
                              <el-radio :label="2">代办人</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-form ref="companyEntityCertifyStepThree" :model="paramsForm" label-width="120px" :rules="companyEntityCertifyStepThreeRules" class="cardInfo_elform">
                <div>
                  <div class="dis al_item">
                    <div class="cursor flex_1 dis al_item" style="height: 10px;">
                      <el-divider direction="horizontal" content-position="center" />
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <P><span class="form-item-title"><b>法定代表人信息</b></span></P>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="法人姓名：" prop="legalInfo.name" class="person-center-form-item">
                            <el-input v-model="paramsForm.legalInfo.name" :disabled="firstType === 2" class="form-item-input" placeholder="请输入法人姓名" />
                            <span class="form-item-title">(名称须与营业执照上的法定代表人一致)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件类型：" prop="legalInfo.idCardType" class="person-center-form-item">
                            <el-select v-model="paramsForm.legalInfo.idCardType" :disabled="firstType === 2" class="form-item-input">
                              <el-option label="全部" :value="0" />
                              <el-option label="大陆身份证" :value="1" />
                              <el-option label="护照" :value="2" />
                              <el-option label="军官证" :value="3" />
                              <el-option label="驾驶证" :value="4" />
                              <el-option label="港澳通行证" :value="5" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件号码：" prop="legalInfo.idCardNo" class="person-center-form-item">
                            <el-input v-model="paramsForm.legalInfo.idCardNo" :disabled="firstType === 2" class="form-item-input" placeholder="请输入证件号码" />
                            <span class="form-item-title">(号码须与证件上号码保持一致)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="出生日期：" prop="legalInfo.birthday" class="person-center-form-item">
                            <el-date-picker v-model="paramsForm.legalInfo.birthday" :disabled="firstType === 2" type="date" value-format="yyyy-MM-dd" />
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="性别：" prop="legalInfo.sex" class="person-center-form-item">
                            <el-radio-group v-model="paramsForm.legalInfo.sex" :disabled="firstType === 2">
                              <el-radio :label="1">男</el-radio>
                              <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="邮政编码：" prop="legalInfo.postCode" class="person-center-form-item">
                            <el-input v-model="paramsForm.legalInfo.postCode" :disabled="firstType === 2" class="form-item-input" placeholder="请输入邮政编码" />
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="联系电话：" prop="legalInfo.phone" class="person-center-form-item">
                            <el-input v-model="paramsForm.legalInfo.phone" :disabled="firstType === 2" class="form-item-input" placeholder="请输入联系电话" />
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="联系地址：" prop="legalInfo.address" class="person-center-form-item">
                            <el-input v-model="paramsForm.legalInfo.address" :disabled="firstType === 2" class="form-item-input" placeholder="请输入联系地址" />
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item" style="margin: 10px;">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件有效期：" prop="legalInfo.idCardTermType" class="person-center-form-item">
                            <el-radio-group v-model="paramsForm.legalInfo.idCardTermType" :disabled="firstType === 2">
                              <div>
                                <el-radio :label="1">期间</el-radio>
                                <el-date-picker
                                  v-model="pickerOptions1"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  align="right"
                                  value-format="yyyy-MM-dd"
                                />
                              </div>
                              <div style="padding-top:10px">
                                <el-radio :label="2">长期有效</el-radio>
                              </div>
                            </el-radio-group>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <el-form-item label="证件照片：" class="person-center-form-item item-photo">
                        <div class="item-up-load">
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="firstType === 2" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl1" />
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="firstType === 2" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl2" />
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="title == '查看'" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl3" />
                        </div>
                        <span class="form-item-title">(上传正面，反面，手持证件照，清晰可见，有效期内，照片大小低于5M，格式为：png、jpg、jpeg)</span>
                      </el-form-item>
                    </div>
                  </div>
                  <!-- <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件照片：" class="person-center-form-item">
                            <div class="wh5-3" style="display: flex; flex-direction: column;margin-bottom: -20px;">
                              <upload ref="upload" :limit="1" :file-list="fileList" :disabled="title == '查看'" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl" />
                            </div>
                            <span class="form-item-title">(清晰可见，有效期内，照片大小低于5M，格式为：png、jpg、jpeg)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div> -->
                </div>
                <div v-if="isVisible">
                  <div class="dis al_item">
                    <div class="cursor flex_1 dis al_item" style="height: 10px;">
                      <el-divider direction="horizontal" content-position="center" />
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <P><span class="form-item-title"><b>代办人信息</b></span></P>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="代办人姓名：" prop="agentInfo.name" class="person-center-form-item">
                            <!-- <span class="form-item-title">代办人姓名：</span> -->
                            <el-input v-model="paramsForm.agentInfo.name" :disabled="firstType === 2" class="form-item-input" placeholder="请输入代办人姓名" />
                            <span class="form-item-title">(名称须与证件上保持一致)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件类型：" prop="agentInfo.idCardType" class="person-center-form-item">
                            <el-select v-model="paramsForm.agentInfo.idCardType" :disabled="firstType === 2" class="form-item-input">
                              <el-option label="全部" :value="0" />
                              <el-option label="大陆身份证" :value="1" />
                              <el-option label="护照" :value="2" />
                              <el-option label="军官证" :value="3" />
                              <el-option label="驾驶证" :value="4" />
                              <el-option label="港澳通行证" :value="5" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件号码：" prop="agentInfo.idCardNo" class="person-center-form-item">
                            <el-input v-model="paramsForm.agentInfo.idCardNo" :disabled="firstType === 2" class="form-item-input" placeholder="请输入证件号码" />
                            <span class="form-item-title">(号码须与证件上号码保持一致)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="出生日期：" prop="agentInfo.birthday" class="person-center-form-item">
                            <el-date-picker v-model="paramsForm.agentInfo.birthday" :disabled="firstType === 2" type="date" value-format="yyyy-MM-dd" />
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item" style="margin: 10px;">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item label="证件有效期：" prop="legalInfo.idCardTermType" class="person-center-form-item">
                            <el-radio-group v-model="paramsForm.legalInfo.idCardTermType">
                              <div>
                                <el-radio :disabled="firstType === 2" :label="1">期间</el-radio>
                                <el-date-picker
                                  v-model="pickerOptions2"
                                  :disabled="firstType === 2"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  align="right"
                                  value-format="yyyy-MM-dd"
                                />
                              </div>
                              <div style="padding-top:10px">
                                <el-radio :disabled="firstType === 2" :label="2">长期有效</el-radio>
                              </div>
                            </el-radio-group>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="dis al_item">
                    <div class="nav-item">
                      <el-form-item label="证件照片：" class="person-center-form-item item-photo">
                        <div class="item-up-load">
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="title == '查看'" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl" />
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="firstType === 2" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl" />
                          <upload class="load-cont" ref="upload" :limit="1" :file-list="fileList" :disabled="firstType === 2" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl" />
                        </div>
                        <span class="form-item-title">(上传正面，反面，手持证件照，清晰可见，有效期内，照片大小低于5M，格式为：png、jpg、jpeg)</span>
                      </el-form-item>
                    </div>
                  </div>
                  <!-- <div class="dis al_item">
                    <div class="nav-item">
                      <div class="dis al_item dis_ju_spb item-header">
                        <div class="cursor flex_1 dis al_item">
                          <el-form-item class="person-center-form-item">
                            <span class="form-item-title">证件照片：</span>
                            <div class="wh5-3" style="display: flex; flex-direction: column;margin-bottom: -20px;">
                              <upload ref="upload" :limit="1" :file-list="fileList" :disabled="title == '查看'" :width-size="1000" :height-size="600" :max-size="1" :file-filter="filterImgType" :name-show="false" @setKey="getUrl" />
                            </div>
                            <span class="form-item-title">(清晰可见，有效期内，照片大小低于5M，格式为：png、jpg、jpeg)</span>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div> -->
                </div>
              </el-form>
            </el-card>
          </div>
        </div>
      </div>

      <div class="image-link-button">
        <el-button class="image-link-button-button" size="mini" @click="gotoCompanyEntityCertifyStepTwo('','')">上一步</el-button>
        <!-- <el-button v-if="firstType === 1" class="image-link-button-button" size="mini" @click="gotoCompanyEntityCertifyStepFour('','')">下一步</el-button> -->
        <el-button class="image-link-button-button" size="mini" @click="gotoCompanyEntityCertifyStepFour('','')">下一步</el-button>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import { legalInfoSave } from '@/api/authentication'
export default {
  components: {
    upload: () => import('@/components/upload/newUpload')
  },
  props: {
    visable: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      firstType: 1,
      isVisible: false,
      activeRadio: 1, // 操作人
      active: 1,
      pickerOptions1: [],
      pickerOptions2: [],
      // 图片类型
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      // 上传图片
      fileList: [],
      title: '',
      paramsForm: {
        // 法人信息
        legalInfo: {
          operator: 1,
          idCardTermStart: '',
          idCardTermEnd: '',
          sex: 1
        },
        // 代办人
        agentInfo: {
          idCardTermStart: '',
          idCardTermEnd: ''
        }
      },
      companyEntityCertifyStepThreeRules: {
        legalInfo: {
          name: [
            { required: true, message: '请填写法人姓名', trigger: 'blur' }
          ],
          idCardType: [
            { required: true, message: '请填写证件类型', trigger: 'blur' }
          ],
          idCardNo: [
            { required: true, message: '请填写证件号码', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请填写出生日期', trigger: 'blur' }
          ],
          postCode: [
            { required: true, message: '请填写邮政编码', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请填写联系电话', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请填写联系地址', trigger: 'blur' }
          ],
          idCardTermType: [
            { required: true, message: '请填写证件有效期', trigger: 'blur' }
          ]
        },
        agentInfo: {
          name: [
            { required: true, message: '请填写法人姓名', trigger: 'blur' }
          ],
          idCardType: [
            { required: true, message: '请填写证件类型', trigger: 'blur' }
          ],
          idCardNo: [
            { required: true, message: '请填写证件号码', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请填写出生日期', trigger: 'blur' }
          ],
          idCardTermType: [
            { required: true, message: '请填写证件有效期', trigger: 'blur' }
          ]
        }
      }
    }
  },
  computed: {
    // activeRadio: {
    //   get() {
    //     return this.value
    //   },
    //   set(val) {
    //   }
    // }
  },
  watch: {
    activeRadio(val) {
      this.paramsForm.legalInfo.operator = val
      if (val === 1) {
        this.isVisible = false
      } else {
        this.isVisible = true
      }
    },
    pickerOptions1(val) {
      this.paramsForm.legalInfo.idCardTermStart = val[0]
      this.paramsForm.legalInfo.idCardTermEnd = val[1]
    },
    pickerOptions2(val) {
      this.paramsForm.agentInfo.idCardTermStart = val[0]
      this.paramsForm.agentInfo.idCardTermEnd = val[1]
    }
  },
  created() {
    this.firstType = this.$route.query.type
    // if (this.firstType === 2) {
      this.getInfo()
    // }
  },
  mounted() {
  },
  methods: {
    getInfo() {
      subjectAuthenticationSee().then(res => {
        if (res.name) {
          this.dataForm = res
        }
      })
    },
    // 证件照
    getUrl1(arr) {
      this.paramsForm.legalInfo.idCardUp = arr[0].zxfUrl
    },
    getUrl2(arr) {
      this.paramsForm.legalInfo.idCardDown = arr[0].zxfUrl
    },
    getUrl3(arr) {
      this.paramsForm.legalInfo.handHoldIdCard = arr[0].zxfUrl
    },
    gotoCompanyEntityCertifyStepTwo(id, type) {
      this.$router.push(`/companyCertification/companyEntityCertifyStepTwo?id=${id}&type=${type}`)
    },
    gotoCompanyEntityCertifyStepFour(id, type) {
      this.$refs.companyEntityCertifyStepThree.validate(valid => {
        if (valid) {
          if (this.paramsForm.legalInfo.idCardUp === undefined || this.paramsForm.legalInfo.idCardUp === '') {
            this.$message.error('证件照正面不能为空')
            return
          }
          if (this.paramsForm.legalInfo.idCardDown === undefined || this.paramsForm.legalInfo.idCardDown === '') {
            this.$message.error('证件照反面不能为空')
            return
          }
          if (this.paramsForm.legalInfo.handHoldIdCard === undefined || this.paramsForm.legalInfo.handHoldIdCard === '') {
            this.$message.error('手持证件照不能为空')
            return
          }
          if (this.activeRadio === 2) {
            if (this.paramsForm.agentInfo.idCardUp === undefined || this.paramsForm.agentInfo.idCardUp === '') {
              this.$message.error('证件照正面不能为空')
              return
            }
            if (this.paramsForm.agentInfo.idCardDown === undefined || this.paramsForm.agentInfo.idCardDown === '') {
              this.$message.error('证件照反面不能为空')
              return
            }
            if (this.paramsForm.agentInfo.handHoldIdCard === undefined || this.paramsForm.agentInfo.handHoldIdCard === '') {
              this.$message.error('手持证件照不能为空')
              return
            }
          }
          legalInfoSave(this.paramsForm).then(res => {
            if (res) {
              this.$message.success('保存成功')
              this.$router.push(`/companyCertification/companyEntityCertifyStepFour?id=${id}&type=${type}`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .setting_shopping-mall_contract-set {
    background: #d8d8d8;
    padding: 4px;
    height: 95%;
    border-radius: 3px;
    overflow: auto;
    .item-up-load{
      display: flex;
      .mall-upload{
        margin-right: 10px;
      }
    }
    .item-photo{
      margin-top: 15px;
      .el-form-item__label{
        &::before{
          content: "*";
          color: #ff4949;
          margin-right: 4px;
        }
      }
    }
    .clearfix{
      margin-top: 20px;
      padding:5px;
      padding-top: 0;
      height: 15px;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
    }
    }
    .fin-setting-content {
      width: 100%;
      margin: 0px 0 4px 4px;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius:5px;
      .cardInfo {
          margin-top: 2px;
          padding: 2px;
          .el-card__body{
            overflow: auto;
          }
          .cardInfo_elform {
            .al_item {
              margin: 5px;
            }
          }
       }
      .user-center-item {
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 10px;
        &.active {
          border: 1px solid #1890ff
        }
      }

    }
    .nav-item {
      font-size: 14px;
      background: #fff;
      border: 0px solid #e3e2e5;
      border-radius: 4px;
      margin-bottom: 2px;
      margin: 0px 80px 0px 80px;
      width: 100%;
      display: inline-block;

      &:nth-child(odd) {
        margin-right: 10px;
        font-size: 14px;
        color: #595961;
      }
      .intro-title {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
        .state {
          width: 700px;
          font-size: 14px;
          .el-step.is-center .el-step__description {
            padding: 0;
          }
          .el-step__head.is-success {
            border-color: #1890ff;
          }
          .is-success {
            color: #1890ff;
          }
        }
      }
      .item-header {
        border-radius: 4px 4px 0 0;
        height: 40px;
        line-height: 39px;
        padding: 0 10px 0 5px;
      }

      .item-content {
        padding: 5px 0;
      }
    }
    .person-center-form-item {
      font-size: 14px;
      // height: 40px;
      margin: 0px 80px 0px 80px;
      .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
        font-size: 14px;
        color: #606266;
      }
      .el-input-number.is-without-controls.el-input__inner{
        width: 20px;
        height: 14px;
      }
      .el-input.is-without-controls.el-input__inner{
        height: 14px;
      }
      .form-item-input{
        min-height: 18px;
        width: 420px;
        font-size: 12px;
      }
      .form-item-title{
        padding-left: 1px;
        padding-right: 1px;
        color: #666;
      }
      .info-setting {
        margin-left: 15px;
        color: #0000FF;
        text-align: right;
        cursor: hand;
      }
      .flex-just{
        vertical-align: middle;
        width: 80px;
      }
    }
    .base-info {
      display: flex;
      .basics-info {
        margin: 0 auto;
      }
    }
    .el-form-item  {
      margin-bottom: 30px;
    }
    .el-col {
      margin-bottom: 0px;
    }
    .noMargin {
      margin-bottom: 0 !important;
    }
    .wh5-3 {
      li {
        width: 200px;
        height: 160px;
      }
      .el-upload--picture-card {
        width: 200px;
        height: 160px;
        line-height: 160px;
      }
    }
  .bg-white-panel {
    padding: 5px;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-left: 100px;
  }
.image-link-button {
  padding: 2px 0 0;
  margin-top: 14px;
  text-align: center;
  justify-content: space-between;
  .image-link-button-button{
     background-color: #00aaff;
     z-index: 1;
     color: #FFFFFF;
     height: 36px;
     width: 150px;
     border: 1px solid #FFFFFF;
     padding: 0;
     font-size: 12px;
     align-items: center;
     border-radius: 10px;
  }
}
  .load-cont{
    .el-upload--picture-card{
      width: 150px;
      height: 100px;
      line-height:200px
    }
    .el-upload-list__item{
      width: 150px;
      height: 100px;
    }
  }
</style>
